<template>
  <div>
    <!--2.1 绑定到表单数据数据中 -->
    <el-dialog @close="close" :title="status.isAdd?'分类添加':'分类编辑'" :visible.sync="status.isshow">
      <el-form :model="form">
        {{form}}
        <div>{{arr}}</div>
        <el-form-item label="规格名称" label-width="120px">
          <el-input v-model="form.specsname" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="规格属性" label-width="120px" v-for="(item,index) in arr" :key="index">
          <div class="input_box">
            <el-input v-model="item.value" autocomplete="off"></el-input>
            <el-button
              class="input_light"
              v-if="index == 0"
              type="primary"
              @click="arr.push({value:''})"
            >新增规格属性</el-button>
            <el-button v-else type="danger" @click="arr.splice(index,1)">删除</el-button>
          </div>
        </el-form-item>
        <el-form-item label="状态" label-width="120px">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="2"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" v-if="status.isAdd" @click="add">添 加</el-button>
        <el-button type="primary" v-else @click="update">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 1.静态页面
// 2.vuex
// 3.初始化form数据，绑定到页面
// 4.初始化一个arr(规格属性单独处理)
// 5.发起列表请求
// 点击添加(注意要给form里面的attrs赋值)

import { reqspecsadd, reqspecsinfo, reqspecsedit } from "../../../http/api";
import { successAlert, errorAlert } from "../../../utils/alert";

import { mapActions, mapGetters } from "vuex";
export default {
  props: ["status"],
  computed: {
    ...mapGetters({
      list: "specs/list"
    })
  },
  data() {
    return {
      isshow: false,
      //2.初始化添加的数据
      form: {
        specsname: "", //’颜色‘
        attrs: "", //"白色,红色，黄色"
        status: 1
      },
      // 规格属性
      arr: [
        {
          value: ""
        },
        {
          value: ""
        }
      ],

      formLabelWidth: "120px"
    };
  },
  methods: {
    ...mapActions({
      reqList: "specs/reqList"
    }),

    //6.1 清空form
    empty() {
      this.form = {
        specsname: "", //’颜色‘
        attrs: "", //"白色,红色，黄色"
        status: 1
      };
      //单独处理arr
      this.arr = [
        {
          value: ""
        },
        {
          value: ""
        }
      ];
    },
    checkedDate() {
      return new Promise(resolve => {
        // 1.规格名称
        if (this.form.specsname == "") {
          errorAlert("规格名称不能为空！");
          return;
        }

        //规格属性
        if (
          this.arr.some(item => {
            return item.value === "";
          })
        ) {
          errorAlert("规格属性均不能为空");
          return;
        }

        // 规格属性需要唯一
        // 双层foreach循环,
        // 去重的方法
        let newArr = this.arr.map(item => item.value);
        let newSet = Array.from(new Set(newArr));
        if (newSet.length != this.arr.length) {
          errorAlert("规格属性不能相同哦！");
          return;
        }
        resolve();
      });
    },
    add() {
      // 添加验空操作
      this.checkedDate().then(() => {
        //  5.1 点击了添加
        // 将arr 的值赋给attrs
        // 将arr的值取出来，给form.attrs
        // arr:[ { "value": "白色" }, { "value": "黑色" }, { "value": "红色" } ]--['白色','黑色','红色']---->"白色,黑色,红色"
        // 用逗号拼接起来

        // this.form.attrs = this.arr.map((item) => item.value).join(',');
        this.form.attrs = this.arr.map(item => item.value).join(",");
        reqspecsadd(this.form).then(res => {
          if (res.data.code == 200) {
            // 1.弹成功
            successAlert(res.data.msg);
            // 2.点击确定之后，form数据要清空
            this.empty();
            // 3.弹框消失--->因为传过来的status是一个引用类型，所以可以在子组件直接操作，但是不可以修改status
            this.status.isshow = false;
            // 列表需要重新渲染---->通知父组件
            this.reqList();
          }
        });
      });
    },

    //7 父元素点击了编辑按钮，触发子组件的的getOne方法
    getOne(id) {
      //发请求---->获取一条数据
      reqspecsinfo({
        id: id
      }).then(res => {
        if (res.data.code == 200) {
          //{id: 10, specsname: 'sdsd', status: 1, attrs: Array(2)}
          // 赋值
          this.form = res.data.list[0];
          //  单独处理规格属性
          //       attrs: Array(2)
          // [0: "sd,1: "ssd"]===转换成[{value:''},{value:''}]
          // this.arr = this.form.attrs.map(item => {
          //   return {
          //     value: item
          //   };
          // });
          this.arr = this.form.attrs.map(item => ({ value: item }));
        }
      });
    },
    // 8.点击了修改
    update() {
      // 添加验空操作
      this.checkedDate().then(res => {
        // 先操作attrs
        this.form.attrs = this.arr.map(item => item.value).join(",");
        // 发请求
        reqspecsedit(this.form).then(res => {
          if (res.data.code == 200) {
            // 1.弹成功
            successAlert(res.data.msg);
            // 2.清空form
            this.empty();
            //3. 弹框消失
            this.status.isshow = false;
            //4.列表重新渲染
            this.reqList();
          }
        });
      });
    },
    // 9.修改Bug
    // 我们希望点击了添加之后，取消，在点击添加，数据还在，但点击了编辑之后，取消后点击添加，清空内容
    // 给弹框添加close关闭事件---如果是添加的取消，什么都不做；如果是编辑的取消，form清空
    close() {
      if (!this.status.isAdd) {
        this.empty();
      }
    }
  },
  mounted() {
    this.reqList();
  }
};
</script>

<style scoped lang="less">
/deep/.input_box {
  display: flex !important;
}
/deep/.input_box .el-input {
  flex: 1 !important;
}
// .input_box .input_light {
//   margin-top: 30px;
// }
</style>